import { MessageTypeEnum } from "@enum/message-type.enum";
import { downloadHTML } from "./downloadHTML";
import { showMessage } from "./showMessage";

export type CollectedBug = { id: string; title: string; url: string; };

export const getCollectedBugs = () => {
  return JSON.parse(localStorage.getItem('collected-bugs') ?? '{}')?.list ?? [];
}

export const getCollectInfo = (id: string) => {
  const collectedBugs = getCollectedBugs();
  const hasCollected = collectedBugs.length && collectedBugs.some((bug: CollectedBug) => bug.id.includes(id));
  return {collectedBugs, hasCollected};
}

export const deleteCollectedBug = (id: string) => {
  const collectedBugs = getCollectedBugs();
  const newCollectedBugs = collectedBugs.filter((bug: CollectedBug) => !bug.id.includes(id));
  localStorage.setItem('collected-bugs', JSON.stringify({list: newCollectedBugs}));
}

export const setCollectionBug = (id: string, title: string, url: string) => {
  const {collectedBugs = [], hasCollected} = getCollectInfo(id);

  if(hasCollected) {
    showMessage(MessageTypeEnum.ERROR, "此bug已收藏");
    return;
  }

  console.log(
    '%c log-by-xier %c id ',
    'background: #41b883; padding: 6px; border-radius: 1px 0 0 1px; color: #fff',
    'background: #35495e; padding: 6px; border-radius: 0 1px 1px 0; color: #fff',
    id
  );

  collectedBugs.push({id: id, title, url});
  localStorage.setItem('collected-bugs', JSON.stringify({list: collectedBugs}));
  showMessage(MessageTypeEnum.SUCCESS, "收藏成功");
}

export const setCollectionIcon = (collectionNode: HTMLDivElement, id: string) => {
  if(!collectionNode) {
    return;
  }

  collectionNode.innerHTML = getCollectInfo(id).hasCollected ?
    `
      <span id="collect-bug" data-type="collected" style="color: #6253e1" class="cursor-pointer font-size-16px margin-right-8px" title="取消收藏此bug">
        <svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg>
      </span>
    `
    :
    `
      <span id="collect-bug" data-type="no-collected" style="color: #b1b1b1" class="cursor-pointer font-size-16px margin-right-8px" title="收藏此bug">
        <svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg>
      </span>
    `;
}

export const saveCollectedBugs = () => {
   const collectedBugs = getCollectedBugs();

  const htmlContent = `
  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>下载的 HTML 页面</title>
    </head>
    <body>
      ${collectedBugs.map((bug: CollectedBug) => `
        <div style="margin-bottom: 6px;">
          <p><a href="${bug.url}">${bug.id} ${bug.title}</a></p>
        </div>
      `).join('')}
    </body>
  </html>
  `;

  downloadHTML('collected-bugs.html', htmlContent);
}
